<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%@ taglib prefix="auth" uri="http://www.foreveross.com/permission" %>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
	<head>
		<title>开放持续集成平台</title>
		<meta charset="UTF-8" />
		<link rel="stylesheet" href="<%=request.getContextPath()%>/lib/bootstrap/css/bootstrap.min.css" />
		<link rel="stylesheet" href="<%=request.getContextPath()%>/lib/font-awesome-4.0.3/css/font-awesome.min.css" />
		<link rel="stylesheet" href="<%=request.getContextPath()%>/css/koala.css" />
		<link rel="stylesheet" href="<%=request.getContextPath()%>/css/main.css" />
		<link rel="stylesheet" href="<%=request.getContextPath()%>/css/uploader.css" />
	</head>
	<body>
		<div class="navbar navbar-default">
			<a class="navbar-brand" href="http://www.openkoala.org" target="_">
				<img src="<%=request.getContextPath()%>/images/global.logo.png"/>
				OPENCI
			</a>
			<div class="navbar-text navbar-right">
				<span id="username" class="username"></span>
				<auth:hasPermission identify="manage.jsp">
					<a href="manage.jsp"><i id="modifyUser" class="glyphicon glyphicon-cog" data-toggle="tooltip" data-placement="bottom" title="管理系统"></i></a>
				</auth:hasPermission>
				<i id="logout" class="glyphicon glyphicon-off" data-toggle="tooltip" data-placement="bottom" title="退出"></i>
			</div>
		</div>
		<div class="main">
			<div class="proejct-box">
				<h2 class="title">Projects</h2>
				<div class="project" id="projects">
					
				</div>
			</div>
		</div>
		<div class="bullhorn" id="bullhorn"><i class="fa fa-pencil-square-o"></i>反馈</div>
		<script type="text/javascript" src="<%=request.getContextPath()%>/lib/jquery-1.8.3.min.js" ></script>
		<script type="text/javascript" src="<%=request.getContextPath()%>/lib/bootstrap/js/bootstrap.min.js" ></script>
		<script type="text/javascript" src="<%=request.getContextPath()%>/lib/koala-ui.plugin.js" ></script>
		<script type="text/javascript" src="<%=request.getContextPath()%>/lib/validate.js" ></script>
		<script type="text/javascript" src="<%=request.getContextPath()%>/js/cis/createProject.js" ></script>
		<script type="text/javascript" src="<%=request.getContextPath()%>/js/cis/importProject.js" ></script>
		<script type="text/javascript" src="<%=request.getContextPath()%>/lib/dmuploader.js" ></script>
		<script>
			$(function() {
				$.get('<%=request.getContextPath()%>/developer/get-name.koala', null, null, 'text').done(function(data){
					$('#username').text(data ? data:'');
				});
				$('#bullhorn').on('click', function(){
					window.location.href = 'http://10.108.1.92:8080/que-web/help/topic/index.action?vo.sysType=123456';
				})
				$('[data-toggle="tooltip"]').tooltip();
				$('#logout').on('click', function() {
					window.location.href = '<%=request.getContextPath()%>/j_spring_security_logout';
				});
				$.get('<%=request.getContextPath()%>/project/pagingquery.koala?page=0&pagesize=1000').done(function(datas) {
					var projects = $('#projects');
					$.get('<%=request.getContextPath()%>/pages/cis/project-template.html').done(function(html) {
						for (var i = 0, j = datas.length; i < j; i++) {
							var data = datas[i]
							var template = $(html);
							template.find('#name').text(data.name);
							template.find('#projectCreateDate').text(data.projectCreateDate);
							var tools = [];
							$.each(data.configurationDtos, function() {
								tools.push('<a href="' + this.requestUrl + '" target="_">' + this.name + '</a>');
							});
							template.find('#configurationDtos').html(tools.join(',&nbsp;'));
							var projectStatus = template.find('#projectStatus');
							switch(data.projectStatus) {
								case 'SUCCESS':
									projectStatus.html('<span class="glyphicon glyphicon-ok" style="color:#5CB85C;"></span>');
									break;
								case 'INTEGRATION_TOOL_FAILURE':
									projectStatus.html('<span class="glyphicon glyphicon-remove" style="color:#D9534F;"></span>&nbsp;&nbsp;<a href="#" onclick="againIntegeration(' + data.id + ', this)">重新整合</a>');
									break;
								case 'INTEGRATION_TOOL':
									projectStatus.html('<div data-id="' + data.id + '" data-role="projectLoading"　title="正在整合工具" style="position: relative;top: -10px;" onclick="showProjectMsg(' + data.id + ', this)"><img alt="正在整合工具" src="images/loading.gif" style="width: 35px; height:35px;"></img></div>');
									break;
								default:
									projectStatus.html('data.projectStatus');
									break;
							}
							template.find('#detail').on('click', {
								id : data.id
							}, function(e) {
								showProjectDetail(e.data.id);
							});
							template.find('#close').on('click', {
								id : data.id,
								template : template
							}, function(e) {
								deleteProject(e.data.id, e.data.template);
							});
							projects.append(template);
						}
						projects.append($('<div class="project-detail"></div>').html('<i id="projectAddBtn" class="btn-add glyphicon glyphicon-plus"></i>'));
						$('#projectAddBtn').on('click', function() {
							$.get('<%=request.getContextPath()%>/pages/cis/generate-project-template.html').done(function(template) {
								var dialog = $(template);
								dialog.modal().on({
									'hidden.bs.modal' : function() {
										$(this).remove();
									}
								});
								dialog.find('#createProject').on('click', {
									dialog : dialog
								}, function(e) {
									e.data.dialog.modal('hide');
									createProject.init();
								});
								dialog.find('#importProject').on('click', {
									dialog : dialog
								}, function(e) {
									e.data.dialog.modal('hide');
									importProject.init();
								});
							}).fail(function(error) {
								$('body').message({
									type : 'error',
									content : '模板文件不存在!'
								});
							});
						});
						projects.find('[data-role="projectLoading"]').each(function() {
							var $this = $(this);
							var id = $this.data('id');
							var intervalId = setInterval(function(){
								$.get('<%=request.getContextPath()%>/project/detail/' + id + '.koala').done(function(project) {
									var projectStatus = $this.parent();
									switch(project.projectStatus) {
										case 'SUCCESS':
											projectStatus.html('<span class="glyphicon glyphicon-ok" style="color:#5CB85C;"></span>');
											clearInterval(intervalId);
											break;
										case 'INTEGRATION_TOOL_FAILURE':
											projectStatus.html('&nbsp;&nbsp;<span class="glyphicon glyphicon-remove" style="color:#D9534F;"></span>&nbsp;&nbsp;<a href="#" onclick="againIntegeration(' + id + ', this)">重新整合</a>');
											clearInterval(intervalId);
											break;
										default:
											break;
									}
								});
							}, 2000);
						});
					});
				});
			});
			var showProjectMsg = function(id, obj) {
				$.get('<%=request.getContextPath()%>/pages/cis/project-real-time.html').done(function(data) {
					var dialog = $(data);
					dialog.modal({
						keyboard : false
					}).on('hidden.bs.modal', function() {
						$(this).remove();
					});
					var modalBody = dialog.find('.modal-body');
					var intervalId = setInterval(function() {
						$.ajax({
							type : 'GET',
							url : '<%=request.getContextPath()%>/project/process/' + id + '.koala',
							async : false
						}).done(function(data) {
							if (!data.result) {
								clearInterval(intervalId);
								$.get('<%=request.getContextPath()%>/project/detail/' + id + '.koala').done(function(project) {
									var projectStatus = $(obj).closest('td');
									switch(project.projectStatus) {
										case 'SUCCESS':
											projectStatus.html('<span class="glyphicon glyphicon-ok" style="color:#5CB85C;"></span>');
											break;
										case 'INTEGRATION_TOOL_FAILURE':
											projectStatus.html('&nbsp;&nbsp;<span class="glyphicon glyphicon-remove" style="color:#D9534F;"></span>&nbsp;&nbsp;<a href="#" onclick="againIntegeration(' + id + ', this)">重新整合</a>');
											break;
										default:
											break;
									}
								});
								modalBody.html(data.msg);
								modalBody.scrollTop(modalBody[0].scrollHeight);
							} else {
								modalBody.html(data.msg);
								modalBody.scrollTop(modalBody[0].scrollHeight);
							}
						});
					}, 1000);
				});
			}
			var showProjectDetail = function(id) {
				$.get('<%=request.getContextPath()%>/project/detail/' + id + '.koala').done(function(project) {
					$.get('<%=request.getContextPath()%>/pages/cis/project-detail.html').done(function(data) {
						var dialog = $(data);
						dialog.find('#name').html(project.name);
						dialog.find('#groupId').html(project.groupId);
						dialog.find('#artifactId').html(project.artifactId);
						var projectStatus = dialog.find('#projectStatus');
						switch(project.projectStatus) {
							case 'SUCCESS':
								projectStatus.html('<span style="font-weight:bold; color:#5CB85C;">创建成功</span>');
								break;
							case 'INTEGRATION_TOOL_FAILURE':
								projectStatus.html('<span style="font-weight:bold; color:#D9534F;">创建失败</span>');
								break;
							case 'INTEGRATION_TOOL':
								projectStatus.html('正在整合工具');
								break;
							default:
								projectStatus.html(project.projectStatus);
								break;
						}
						dialog.find('#createDate').html(project.projectCreateDate);
						var devlopers = [];
						$.each(project.projectDeveloperDtos, function() {
							devlopers.push('&nbsp;&nbsp;' + this.name);
						});
						dialog.find('#devlopers').html(devlopers.join(','));
						var tools = [];
						$.each(project.toolDtos, function() {
							var html = [];
							var toolStatus = '';
							switch(this.toolIntegrationStatus) {
								case 'SUCCESS':
									toolStatus = '<span style="font-weight:bold; color:#5CB85C;">整合成功</span>';
									break;
								case 'FAILURE':
									toolStatus = '<span style="font-weight:bold; color:#D9534F;">整合失败</span>';
									break;
								default :
									toolStatus = '<span style="font-weight:bold; color:#D9534F;">正在整合工具</span>';
									break;
							}
							html.push('<div class="panel panel-default"><div class="panel-heading">' + this.toolConfigurationDto.name + '(' + toolStatus + ')</div><table class="table"><thead><tr><th class="first">创建过程</th><th class="second">时间</th><th class="third">结果</th></tr></thead><tbody>');
							$.each(this.toolInterfaceImplementDtos, function() {
								var result = '';
								if (this.success) {
									result = '<span style="font-weight:bold;color:#5CB85C">成功</span>';
								} else {
									result = '<span style="font-weight:bold;color:#D9534F">失败' + (this.record == null ? '' : '(' + this.record + ')') + '</span>';
								}
								html.push('<tr><td class="first">' + this.toolInterface + '</td><td class="second">' + this.executeDate + '</td><td class="third">' + result + '</td></tr>');
							});
							html.push('</tbody></table></div>');
							tools.push(html.join(''));
						});
						tools.push('<div class="panel panel-default"><div class="panel-heading">邮件发送</div><table class="table"><thead><tr><th class="first">用户名</th><th class="second">邮箱</th><th class="third">发送结果</th></tr></thead><tbody>');
						$.each(project.projectDeveloperDtos, function() {
							var result = '';
							if (this.notice) {
								result = '<span style="font-weight:bold;color:#5CB85C">成功</span>';
							} else {
								result = '<span style="font-weight:bold;color:#D9534F">失败' + (this.noticeFailureCause == null ? '' : '(' + this.noticeFailureCause + ')') + '</span>';
							}
							tools.push('<tr><td class="first">' + this.name + '</td><td class="second">' + this.email + (this.notice ? '' : '&nbsp;&nbsp;<a href="#" onclick="againSendemail(' + id + ')">重新发送</a>') + '</td><td class="third">' + result + '</td></tr>');
						});
						tools.push('</div>')
						dialog.find('#tools').html(tools.join(''));
						dialog.modal({
							keyboard : false
						}).on({
							'hidden.bs.modal' : function() {
								$(this).remove();
							}
						});
					});
				});
			}
			var deleteProject = function(id, template) {
				$('body').confirm({
					content : '确定要删除该项目吗?',
					callBack : function() {
						$.post('<%=request.getContextPath()%>/project/remove/' + id + '.koala').done(function(result) {
							if (result) {
								$('body').message({
									type : 'success',
									content : '删除成功'
								});
								window.location.reload();
							} else {
								$('#projectGrid').message({
									type : 'error',
									content : '删除失败'
								});
							}
						});
					}
				});
			}
			var againIntegeration = function(id, obj) {
				var $td = $(obj).parent();
				$.get('project/again-integeration/' + id + '.koala').done(function() {
					$td.html('<div title="正在整合工具" style="position: relative;top: -10px;" onclick="showProjectMsg(' + id + ', this)"><img alt="正在整合工具" src="images/loading.gif" style="width: 35px; height:35px;"></img></div>');
					var intervalId = setInterval(function() {
						$.get('project/detail/' + id + '.koala').done(function(project) {
							switch(project.projectStatus) {
								case 'SUCCESS':
									$td.html('<span class="glyphicon glyphicon-ok" style="color:#5CB85C;"></span>');
									clearInterval(intervalId);
									break;
								case 'INTEGRATION_TOOL_FAILURE':
									$td.html('&nbsp;&nbsp;<span class="glyphicon glyphicon-remove" style="color:#D9534F;"></span>&nbsp;&nbsp;<a href="#" onclick="againIntegeration(' + id + ', this)">重新整合</a>');
									clearInterval(intervalId);
									break;
								default:
									break;
							}
						});
					}, 2000);
				});
			}
			var againSendemail = function(id) {
				$.get('project/again-sendemail/' + id + '.koala').done(function() {
					$('.modal-dialog .modal-body').message({
						type : 'success',
						content : '重新发送成功'
					});
				});
			}
		</script>
	</body>
</html>
